<template>
	<view class="content" :style="`min-height: ${windowHeight}px`">
		<up-tabs
		:scrollable="false"
		:list="tabList"
		lineColor="#ff4e4e"
		lineWidth="70"
		:activeStyle="{ color: '#ff4e4e', fontSize: '32rpx', fontWeight: 'bold' }"
		:inactiveStyle="{ fontSize: '32rpx', fontWeight: 'bold', color: '#999999' }"
		>
		</up-tabs>
		<view class="content-view">
			<view class="item-view" v-for="(item, index) in activitylist" :key="index" @click="handleItemClick(item)">
				<up-image :src="item.thumbnail || img" width="100%" mode="widthFix‌" radius="5"></up-image>
				<view class="info-view">
					<view class="title">{{item.activityTitle}}</view>
					<view class="time-view">
						<view class="label">开始时间</view> <view>{{item.activityStartTime}}</view>
					</view>
					<view class="time-view">
						<view class="label">结束时间</view> <view>{{item.activityEndTime}}</view>
					</view>
					<view class="tag-view">
						<up-tag
						v-if="item.alreadyAnswer"
						text="已参加" 
						bgColor="#0E9ADF" 
						color="#fff" 
						borderColor="transparent"></up-tag>
						<up-tag 
						v-else
						:text="item.joinFlag?'已报名':'未报名'" 
						:bgColor="item.joinFlag?'#999':'#d81e06'" 
						color="#fff" 
						borderColor="transparent"></up-tag>
						
					</view>
				</view>
				<!-- status alreadyAnswer 状态 -->
			</view>
			<up-loadmore :status="status" />
		</view>
	</view>
</template>

<script>
	import { activityApi } from '@/api/activity/activity-app.js';
	import { countTotalPage } from '@/utils/util'
	
	export default {
		data() {
			return {
				img: 'https://axhub.im/ax9/4fb01a9c2a1b02c8/images/%E7%9F%A5%E8%AF%86%E7%AB%9E%E8%B5%9B/u38.svg',
				tabList: [
					{
						name: '全部活动'
					},
					{
						name: '进行中'
					},
					{
						name: '已结束'
					},
					{
						name: '未开始'
					}
				],
				pageRequest:{
					page:1,
					limit:10,
				},
				totalPage: 0,
				status: 'loadmore',
				activitylist: [],
				windowHeight: 0
			}
		},
		onShow() {
			this.getList()
			this.getsize()
		},
		onReachBottom() {
			if (this.pageRequest.page < this.totalPage) {
				this.pageRequest.page ++
				this.status = 'loading';
				this.getList()
			} else {
				this.status = 'noMore';
			}
		},
		methods: {
			async getList() {
				const result = await activityApi.getCompetitionList(this.pageRequest);
				if(result.data.list.length > 0){
					if (this.pageRequest.page === 1) {
						this.activitylist = result.data.list
						this.status = 'noMore';
					} else {
						this.activitylist = this.activitylist.concat(result.data.list);
					}
					this.totalPage = countTotalPage(result.data.total)
				
				}else {
					uni.showToast({
					  title: '没有更多数据了',
					  icon: 'none',
					});
				}
			},
			getsize(){
			  let that = this
			  uni.getSystemInfo({
				success(res) {console.log(res)
				  that.windowHeight = res.windowHeight
				},
			  })
			},
			handleItemClick(item) {
				if (!item.alreadyAnswer) {
					if (item.joinFlag) {
						uni.navigateTo({
							url: '../brisk-walking/knowledgeContest?id=' + item.id
						});
					} else {
						uni.navigateTo({
							url: `/answer-questions/question-transfer?id=${item.id}`
						})
					}
				} else {
					uni.showToast({
					  title: '您已经答完题啦~',
					  icon: 'none',
					});
				}
				
				
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f3eded;
	}
	.item-view {
		background-color: #fff;
		margin-bottom: 30rpx;
		border-top-right-radius: 10rpx;
		border-top-left-radius: 10rpx;
		.info-view {
			padding: 30rpx;
			.title {
				font-size: 38rpx;
				font-weight: 700;
				margin-bottom: 10rpx;
			}
			.time-view {
				font-size: 30rpx;
				margin: 20rpx 0;
				display: flex;
				align-items: center;
				.label {
					margin-right: 30rpx;
				}
			}
		}
	}
	.tag-view {
		display: flex;
		align-items: center;
	}
</style>